<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="Bootstrap-ecommerce by Vosidiy">

    <title>用户中心</title>

    <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">

    <!-- jQuery -->
    <script src="js/jquery-2.0.0.min.js" type="text/javascript"></script>

    <!--layui-->
    <script src="/layui.js"></script>
    <link href="/css/layui.css" rel="stylesheet" type="text/css"/>

    <!-- Bootstrap4 files-->
    <script src="js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <!-- Ionicons -->
    <link rel="stylesheet" href="/AdminLTE-2.4.12/bower_components/Ionicons/css/ionicons.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/AdminLTE-2.4.12/bower_components/font-awesome/css/font-awesome.min.css">
    <!-- Font awesome 5 -->
    <link href="fonts/fontawesome/css/fontawesome-all.min.css" type="text/css" rel="stylesheet">

    <!-- plugin: owl carousel  -->
    <link href="plugins/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="plugins/owlcarousel/assets/owl.theme.default.css" rel="stylesheet">
    <script src="plugins/owlcarousel/owl.carousel.min.js"></script>

    <!-- custom style -->
    <link href="css/ui.css" rel="stylesheet" type="text/css"/>
    <link href="css/responsive.css" rel="stylesheet" media="only screen and (max-width: 1200px)" />
    <link href="/css/footerAdjust.css" rel="stylesheet"/>

    <script src="js/changeUserInfo.js"></script>
    <!--jQuery验证-->
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

    <script src="js/userInfoValidate.js"></script>
    <style>
        .error{
            color:red;
            float: left;
        }
        .layui-form-label{
            width:100px;
        }
        .layui-form-item .layui-input-inline{
            width: 220px;
        }
        .layui-form-radio>i:hover, .layui-form-radioed>i{
            color:#ffc107;
        }
    </style>

</head>
<body>
    <div th:replace="fragment::header"></div>

    <section class="main-content section-main bg padding-y-sm">
        <div class="container">
            <div class="row row-sm">
                <aside class="col-md-2" style="text-align: center">
                    <br>
                    <h5 class="text-uppercase">个人中心</h5>
                    <ul class="menu-category">
                        <li> <a href="#" style="color: #ffc107"><i class="fa fa-book"></i> 个人信息  </a></li>
                        <li> <a href="/userCenter/RecAddress"><i class="fa fa-truck"></i> 收货信息 </a></li>
                        <li> <a href="/userCenter/myOrders?page=1"><i class="fa fa-file-text"></i> 我的订单 </a></li>
                        <li> <a href="#"><i class="fa fa-user"></i> 会员中心 </a></li>
                        <li> <a href="#"><i class="fa fa-heart"></i> 收藏商品 </a></li>
                        <li> <a href="#"><i class="fa fa-thumbs-up"></i> 为您推荐 </a></li>

                    </ul>

                </aside>
                <div class="card col-md-10">
                    <div class="card-body">
                        <nav class="navbar navbar-expand-lg navbar-light">

                            <div class="collapse navbar-collapse" id="main_nav">
                                <ul class="navbar-nav">
                                    <li class="nav-item">
                                        <a class="nav-link" href="#" style="color: orange"> 基本信息 </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#"> 头像照片 </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#"> 更多个人信息</a>
                                    </li>

                                </ul>
                            </div> <!-- collapse .// -->
                        </nav>
                        <br><br>
                        <div class="container" style="display: flex;justify-content: center">
                            <form class="layui-form" action="/userCenter" method="post" th:object="${userInfo}">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">昵称</label>
                                    <div class="layui-input-inline">
                                        <input th:field="*{nickname}" type="text" name="title" required  lay-verify="required"  class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">性别</label>
                                    <div class="layui-input-inline">
                                        <!--<input  type="text" name="title" required  lay-verify="required"  class="layui-input">-->
                                        <input th:field="*{gender}" type="radio"  value="男" title="男" checked>
                                        <input th:field="*{gender}" type="radio"  value="女" title="女" >
                                        <input th:field="*{gender}" type="radio"  value="保密" title="保密" >
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">出生日期</label>
                                    <div class="layui-input-inline">
                                        <input th:value="${birthdate}" th:name="birthdate2" id="test1"  type="text" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">职业</label>
                                    <div class="layui-input-inline">
                                        <input th:field="*{occupation}" type="text" name="title"   class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">兴趣爱好</label>
                                    <div class="layui-input-inline">
                                        <input th:field="*{preference}" type="text" name="title"  class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button type="submit" style="background-color: #ffc107" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <!--<div class="row row-sm">-->
                            <!--<div class="col-md-4">-->
                                <!--<label style="font-size: 16px;float: right"><i class="fa fa-star margin-r-5"></i> 昵称: </label><br><br>-->
                                <!--<label style="font-size: 16px;float: right"><i class="fa fa-male margin-r-5"></i> 性别: </label><br><br>-->
                                <!--<label style="font-size: 16px;float: right"><i class="fa fa-calendar margin-r-5"></i> 出生日期: </label><br><br>-->
                                <!--<label style="font-size: 16px;float: right"><i class="fa fa-phone margin-r-5"></i> 电话号码: </label><br><br>-->
                                <!--<label style="font-size: 16px;float: right"><i class="fa fa-envelope margin-r-5"></i> 邮箱: </label><br><br>-->
                                <!--<label style="font-size: 16px;float: right"><i class="fa fa-briefcase margin-r-5"></i> 职业: </label><br><br>-->
                                <!--<label style="font-size: 16px;float: right"><i class="fa fa-coffee margin-r-5"></i> 兴趣爱好: </label><br><br>-->
                            <!--</div>-->
                            <!--<div class="col-md-8">-->
                                <!--<form class="infoForm" method="post">-->
                                    <!--<label class="nickname c_nickname" style="font-size: 16px; float: left;" th:text="${userInfo.nickname}">小白</label><br><br>-->
                                    <!--<label class="gender c_gender" style="font-size: 16px; float: left;" th:text="${userInfo.gender}">男</label><br><br>-->
                                    <!--<label class="birthday c_birthday" style="font-size: 16px; float: left;" th:text="${userInfo.brithdate}">1999-09-09</label><br><br>-->
                                    <!--<label class="phonenumber c_phonenumber" style="font-size: 16px; float: left;" >18888888888</label><br><br>-->
                                    <!--<label class="e_mail c_e_mail" style="font-size: 16px; float: left;" >aaaaa@email.com</label><br><br>-->
                                    <!--<label class="occupation c_occupation" style="font-size: 16px; float: left;" >学生</label><br><br>-->
                                    <!--<label class="preference c_preference" style="font-size: 16px; float: left;" >电子产品</label><br><br>-->
                                    <!--<br><br><br><br>-->
                                    <!--<div class="form-group" >-->
                                        <!--<div style="-->
                                    <!--position: absolute;-->
                                    <!--left: 50%;-->
                                    <!--transform: translate(-50%,-50%);-->
                                <!--">-->
                                            <!--<input type="button" class="infoChangeCommit changeInfo btn btn-block btn-primary btn-flat" style="background-color: #ffc107;border-color: yellow;" value="确定修改">-->
                                        <!--</div>-->
                                    <!--</div>-->
                                <!--</form>-->
                            <!--</div>-->
                        <!--</div>-->
                        <br><br>
                    </div> <!-- card-body .// -->
                </div> <!-- card.// -->
            </div> <!-- row.// -->



        </div> <!-- container .//  -->
    </section>


    <div th:replace="fragment::footer"></div>
</body>

<script th:inline="javascript">
    $(document).ready(function () {
        layui.use(['form','laydate'], function(){
            var form = layui.form;
            var laydate = layui.laydate


            //执行一个laydate实例
            laydate.render({
                elem: '#test1', //指定元素
                value:[[${birthdate}]],
                theme: '#ffc107'
            });
        });
    })

</script>
</html>




